<template>
  <div id="nav-wapper" class="" :class="if_navll == 0 ? 'nav_bg':'llllll'" >
    <b-container>
      <b-navbar toggleable="lg" type="dark" variant="">

        <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>

        <b-navbar-brand id="logo" href="/">
           <img src="/static/img/logo.png" alt="" srcset="">
        </b-navbar-brand>

        <b-collapse is-nav id="nav_collapse">

          <b-navbar-nav>
            <b-nav-item :active="'home' ==navUrl" href="#" class="xiu yanse">
              <router-link to="/">{{$t('nav_sy')}}</router-link>
            </b-nav-item>
          </b-navbar-nav>

          <!-- Right aligned nav items -->
          <b-navbar-nav class="ml-auto">


            <b-nav-item-dropdown class="nav-dropdown-group all"  v-if="loginStatus">
              <!-- Using button-content slot -->
              <template slot="button-content">
                <span class="user-name" @click="gotoRoute('/user')">
                  <!-- <b class="icon-user"></b> -->
                 {{userName}}
                </span>
                <div @click="loginOut"  class="yanse" style="display: inline-block;font-size:8px">{{$t('tuichudengru')}}</div> 
              </template>
            </b-nav-item-dropdown>
            <div class="login-group" v-else>
               <button id="denglu" class="denglu" @click="gotoRoute('/login')" :class="{beul:url=='/register',dddd:url=='/login'}">{{$t('nav_dl')}}</button>
              <button id="zhuce" class="zhuce" @click="gotoRoute('/register')" :class="{beul:url=='/login',dddd:url=='/register'}">{{$t('nav_zc')}}</button>
             
            </div>

             <!-- <b-nav-item-dropdown class="nav-dropdown-group" :text="langText">
              <b-dropdown-item @click="langChange('CN')">简体中文</b-dropdown-item>
              <b-dropdown-item @click="langChange('TW')">繁体中文</b-dropdown-item>
              <b-dropdown-item @click="langChange('JP')">日本语</b-dropdown-item>
            </b-nav-item-dropdown> -->
          </b-navbar-nav>

        </b-collapse>
      </b-navbar>
    </b-container>
  </div>
</template>

<script >

import { mapState, mapActions } from "vuex";
import mixins from '../../assets/js/mixin';
import { isPhoneNum, isEmail, userNameTransform, USERLANG } from "../../assets/js/common";
export default {
  mixins: [mixins],
  data() {
    return {
      langText: "简体中文",
      userName: "",
      url: "",
      if_navll:0,
      m_userId: "",
      user_avatar: "",  //用户头像
    };
  },
  methods: {
    huoquurl(){
       let a= this.$route.path
       if(a=='/'){
            this.if_navll = 1
       }else if(a=='/login'){
         this.if_navll = 1
       }else if(a=='/register'){
         this.if_navll = 1
       }else if(a=='/repwd'){
         this.if_navll = 1
       }else {
         this.if_navll = 0
       }


      //  console.log("luyou"+this.$route.path)
    },
    langChange(lang) {
      this.ifLang(lang);
      this.$i18n.locale = lang;
      localStorage.lang = lang;
      window.location.reload();
    },
    ifLang(lang = "CN") {
      if (lang == "CN") {
        this.langText = "简体中文";
      } else if (lang == "TW") {
        this.langText = "繁体中文";
      } else if (lang == "JP") {
        this.langText = "日本语";
      }

    },
    loginOut() {
      let _self = this;
      _self.$http.post('/nb-web/api/user/login/out').then(res => {
        if (res.data.code == '001') {
          _self.$http.defaults.headers.common['userId'] = "";
          _self.$http.defaults.headers.common['ticket'] = "";
          _self.$http.defaults.headers.common['account'] = "";
          _self.$cookie.setCookie('userId','');
          _self.$cookie.setCookie('ticket','');
          _self.$cookie.setCookie('account','');
          _self.userName = '';
          _self.loginChange(false);
          _self.gotoRoute('/');
        } else {
          _self.$swal(res.data.msg,{
					icon:'/static/img/tan_chuang.png'
				})
        }
      })
    },

    goto_bbs() {
      // 跳转到币吧个人主页
      // this.$router.push({
      //   path:"/bbs/user",
      //   query:{userId:this.$cookie.getCookie('userId') || ""}
      // })

      var userId = this.$cookie.getCookie('userId') || ""

      window.location.href = window.location.origin + '/bbs/user/post?userId=' + userId

    },

    //获取用户头像
    get_userInfo() {
      if (this.m_userId) {
        this.user_avatar = '/src/assets/img/bbs/z_fans.png';
        this.userName = this.$cookie.getCookie("account");
      }
    },

    ...mapActions(['loginChange'])
  },
  computed: {
    ...mapState(['navUrl', 'loginStatus']),
    
  },
  created() {
    
 
    this.m_userId = this.$cookie.getCookie('userId') || "";
    // this.get_userInfo();

    let userLang = navigator.language || navigator.userLanguage;//常规浏览器语言和IE浏览器
    let lang = USERLANG();
    // console.log(lang)

    this.$i18n.locale = lang || "CN";
    this.ifLang(lang);
    // this.userName = userNameTransform(this.$cookie.getCookie('account').replace(/\"/g, ""));
    this.loginChange(this.$cookie.getCookie('ticket'));
  },
  updated(){
    this.huoquurl()
  },
  watch: {
    

    loginStatus(newval) {
      // this.userName = userNameTransform(this.$cookie.getCookie('account').replace(/\"/g, ""));
      this.get_userInfo();
    },
    $route(newval) {
      this.url = newval.path;
    }
  }
};
</script>

<style lang="scss">
.dddd{
  display: none!important
}
#beul{
   color: #ffffff;
      background: #5291FF;
      border-radius: 8px;
}
.llllll{//首页以及登录注册页动态加载
    background: rgba(24,44,90,0.20)!important;
    position: absolute;
    top: 0px;
    z-index: 200000;
    width: 100%;
}
.nav_bg {
  background-color: #102248!important;
  // background-image: linear-gradient(90deg,rgb(38, 39, 87) 25%, rgb(90, 56, 98) 100%);
}
.all .nav-link::after{
  display: none
}
// @media screen and (min-width: 1500px) {
//   .nav_bg .container {
//     max-width: 1500px;
//     width: 100%;
//   }
// }
.all .nav-link:hover{
  color: #ffffff;
}

#nav-wapper {
  .navbar {
    padding-top: 0.9rem;
    padding-left: 0;
    padding-right: 0;
  }
  .nav-item {
    .nav-link {
       font-family: PingFangSC-Semibold;
      font-size: 18px;
      
      letter-spacing: 0;
     
      color: #2d6df0;
      transition: color 0.25s linear;
      padding-left: 1.2rem;
      padding-right: 1.2rem;
      &:hover {
        
        color: white;
      }
      &.active {
        color: white;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
    }
  }
 .all  .dropdown-menu{
    display: none
  }
  #logo {
    padding-top: 0;
    margin-left:10rem;
    margin-right: 4rem;
    img {
      width: 131px;
      height: 34px;
    }
  }
  .ml-auto, .mx-auto{
    margin-right:10rem
  }
  .nav-dropdown-group {
    padding: 0.5rem;
    padding-left: 0;
    padding-right: 1rem;
    a {
      span {
        color: #2d6df0;
      }
      &::after {
        color: #2d6df0;
      }
    }
  }
  .login-group {
    padding: 0.5rem;
    padding-left: 0;
    button {
      cursor: pointer;
      outline: none;
      display: inline-block;
      padding: 0;
      width: 77px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      color: #2d6df0;
      border-radius: 9px;
      border: 0;
      background-color: transparent;
    }
    .beul{ 
      color: #ffffff;
      background: #5291FF;
      border-radius: 8px;
      // background-image: linear-gradient(180deg, #27e7dd, #2d6ff0);
      &:hover {
        background: #5291FF;
        
      }
    }
  }
  
}
.denglu{
  color: #ffffff!important;
  background: #5291FF!important;
  border-radius: 8px!important;
}
.user-name {
  color: #2d6df0;
  .icon-user {
    display: inline-block;
    width: 21px;
    height: 21px;
    // background: url("../../assets/img/icon-user.png") no-repeat center;
    vertical-align: middle;
    margin-right: 5px;
    border-radius: 50%;
  }
}
.yanse:hover{
  color:#ffffff!important
}

.zhuce:hover{
  color:#ffffff!important
}
#nav-wapper .nav-item .nav-link span:hover{
  color:#ffffff!important
}
#nav-wapper .nav-item .nav-link:hover .yanse{
   color: #2d6df0;
}
.user-name:hover .yanse{
  color: #2d6df0;
}
</style>


